<template>
  <div class="container">
    <div class="app-container">
      <el-card>
        <el-row type="flex" justify="end">
          <el-button type="primary" size="small" @click="add(null,'add')">添加角色</el-button>
        </el-row>
        <el-divider />
        <el-table :data="tableData" border>
          <el-table-column align="center" prop="title" label="角色名称" />
          <el-table-column align="center" prop="description" label="角色描述" />
          <el-table-column align="center" label="操作">
            <template v-slot="{row}">
              <el-button type="primary" plain size="mini" @click="assignPerm(row.id)">分配权限</el-button>
              <el-button size="mini" plain @click="edit(row.id,'edit')">编辑</el-button>
              <el-button type="danger" plain size="mini" @click="del(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-divider />
        <!-- 分页器 -->
        <el-row type="flex" justify="center">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            @current-change="currentPage"
          />
        </el-row>
      </el-card>
      <!-- 角色弹窗 -->
      <el-dialog :title="title" :visible="showDialog" @close="close">
        <el-form ref="form" :model="formData" :rules="rules">
          <el-form-item label="角色名称" label-width="120px" prop="title">
            <el-input v-model="formData.title" style="width: 90%" />
          </el-form-item>
          <el-form-item label="角色描述" label-width="120px" prop="description">
            <el-input v-model="formData.description" style="width: 90%" />
          </el-form-item>
        </el-form>
        <el-row type="flex" justify="end">
          <el-button type="primary" size="small" @click="submit">确认</el-button>
          <el-button size="small" @click="close">取消</el-button>
        </el-row>
      </el-dialog>
      <!-- 分配权限弹窗 -->
      <PermDialog :id="formData.id" ref="perm" :show-perm-dialog.sync="showPermDialog" />
    </div>
  </div>
</template>

<script>
import { addRoles, deleteRoles, getRoles, getRolesCount, getRolesDetails, updateRoles } from '@/api/roles'
import PermDialog from './components/perm-dialog.vue'
export default {
  components: { PermDialog },
  data() {
    return {
      tableData: [],
      limit: 5, // 每页的获取条数
      start: 0, // 开始获取的位置
      total: 0, // 角色总数量
      showDialog: false, // 控制角色弹窗
      openTitle: '', // 弹窗标题
      showPermDialog: false, // 控制权限弹窗
      formData: {
        id: null, //
        title: '', // 角色名称
        description: '' // 角色描述
      },
      rules: {
        title: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],
        description: [{ required: true, message: '角色描述不能为空', trigger: 'blur' }]
      }
    }
  },
  computed: {
    title() {
      return this.openTitle === 'add' ? '添加角色' : '编辑角色'
    }
  },
  created() {
    this.getRolesList()
    this.getRolesCount()
  },
  methods: {
    // 获取角色列表
    async getRolesList() {
      const res = await getRoles({
        _limit: this.limit,
        _start: this.start
      })
      this.tableData = res.data
    },
    // 获取角色数量
    async getRolesCount() {
      const res = await getRolesCount()
      this.total = res.data * 2
    },
    // 分页功能
    currentPage(val) {
      this.start = (val - 1) * this.limit
      this.getRolesList()
    },
    add(id, txt) {
      this.showDialog = true
      this.openTitle = txt
    },
    // 确认按钮
    async submit() {
      // 校验表单
      this.$refs.form.validate()
      if (this.openTitle === 'add') {
        // 调用添加接口
        await addRoles(this.formData)
        // 提示
        this.$message.success('添加角色成功')
      } else {
        // 调用编辑接口
        await updateRoles(this.formData)
        // 提示
        this.$message.success('修改角色成公')
      }
      // 刷新列表
      this.getRolesList()
      this.getRolesCount()
      // 退出弹窗
      this.close()
    },
    // 关闭角色弹窗
    close() {
      this.showDialog = false
      // 清空表单
      this.$refs.form.resetFields()
    },
    // 编辑按钮---回显数据
    async edit(id, txt) {
      if (id) {
        this.formData.id = id
      }
      const res = await getRolesDetails(id)
      this.formData = res.data
      this.openTitle = txt
      this.showDialog = true
    },
    // 删除按钮
    del(id) {
      this.$confirm('确定删除该角色？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await deleteRoles(id)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        // 刷新页面
        this.getRolesList()
        this.getRolesCount()
      }).catch(() => {
        // this.$message({
        //   type: 'info',
        //   message: '已取消删除'
        // })
      })
    },
    // 分配权限
    assignPerm(id) {
      if (id) {
        this.formData.id = id
      }
      this.showPermDialog = true
      this.$refs.perm.getRoles()
    }
  }
}
</script>

<style>

</style>
